<template>
  <div class="container">
    <div class="app-container">
      <el-button
        type="primary"
        size="mini"
        @click="showDialog = true"
      >添加角色</el-button>
      <el-table :data="list">
        <el-table-column align="center" prop="name" label="角色" width="200px">
          <template #default="{ row }">
            <el-input
              v-if="row.isEsdi"
              v-model="row.EsditObj.name"
              size="mini"
            />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="state" label="启用" width="200px">
          <template #default="{ row }">
            <el-switch
              v-if="row.isEsdi"
              v-model="row.EsditObj.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
            <span v-else>{{
              row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "未设置"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述">
          <template #default="{ row }">
            <el-input
              v-if="row.isEsdi"
              v-model="row.EsditObj.description"
              size="mini"
            />
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <template v-if="row.isEsdi">
              <el-button
                size="mini"
                type="text"
                @click="handerEdit(row)"
              >确认</el-button>
              <el-button
                size="mini"
                type="text"
                @click="cancelEsdi(row)"
              >取消</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="mini">分配权限</el-button>
              <el-button
                type="text"
                size="mini"
                @click="row.isEsdi = true"
              >编辑</el-button>
              <!-- 气泡弹窗 -->
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="deleteConfirm(row.id)"
              >
                <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-around">
        <el-col :span="12">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="showDialog" title="新增角色" @close="close">
      <el-form ref="myref" label-width="120px" :model="formDta" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formDta.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item prop="state" label="启用">
          <el-tooltip
            :content="'开关状态: ' + (formDta.state === 1 ? '启用' : '未启用')"
            placement="top"
          >
            <el-switch
              v-model="formDta.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
              />
            </el-switch>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="description" label="角色描述">
          <el-input
            v-model="formDta.description"
            placeholder="请输入角色描述"
            type="textarea"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addRole">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { reqGetRoleList, reqAddRole, recommendeRole, reqdeleteRole } from '@/api/role'
export default {
  name: 'Role',
  data() {
    return {
      list: [], // 角色列表
      total: 0, // 总数，，
      params: { page: 1, pagesize: 2 },
      showDialog: false,
      formDta: {
        name: '',
        description: '',
        state: ''
      },
      rules: {
        name: [{ required: true, message: '名称是必填的', trigger: 'blur' }],
        description: [
          { required: true, message: '描述是必填的', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 每页条数发生变化
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getRoleList()
    },
    // 页面发生变化
    handleCurrentChange(val) {
      this.params.page = val
      this.getRoleList()
    },
    //  获取角色列表
    async getRoleList() {
      const {
        data: { rows, total }
      } = await reqGetRoleList(this.params)
      // 做个boer值的数据做编辑
      rows.forEach((item) => {
        // 存一份做单个校验
        item.isEsdi = false
        // 存一个对象用于 false显示
        item.EsditObj = {
          name: item.name,
          description: item.description,
          state: item.state
        }
      })
      this.list = rows
      this.total = total
    },
    close() {
      this.showDialog = false
      this.$refs.myref.resetFields()
    },
    addRole() {
      this.$refs.myref.validate(async(boo) => {
        if (boo) {
          await reqAddRole(this.formDta)
          this.close()
          this.getRoleList()
        }
      })
    },

    // 取消编辑 数据不会改变
    cancelEsdi(row) {
      row.isEsdi = false
      // 还原数据 点击后数据更改还原
      row.EsditObj = {
        name: row.name,
        description: row.description,
        state: row.state
      }
    },
    // 确认按钮  修改数据
    async handerEdit(row) {
      // 判断他里面的数据不能为空
      if (!row.EsditObj.name.trim()) return this.$message.warning('不能为空')
      if (!row.EsditObj.description.trim()) {
        return this.$message.warning('不能为空')
      }
      // 发请求  需要有id 这块结构出来加上id
      await recommendeRole({ ...row.EsditObj, id: row.id })
      // eslint-disable-next-line require-atomic-updates
      // 以上可行 让他不去校验他
      // row.isEsdi = false
      // row.name = row.EsditObj.name
      // row.description = row.EsditObj.description
      // row.state = row.EsditObj.state
      // 上面代码虽然可以实现但是会报警告 下面使用 assign()
      Object.assign(row, {
        isEsdi: false,
        name: row.EsditObj.name,
        description: row.EsditObj.description,
        state: row.EsditObj.state
      })
    },
    async deleteConfirm(id) {
      // console.log(1)
      await reqdeleteRole(id)
      // 如果当前页只剩一条数据了 我们要page页面--再去发起请求
      if (this.list.length === 1 && this.params.page > 1) {
        this.params.page--
      }
      this.getRoleList()
    }
  }
}
</script>
